<template>
  <div class="wrap">
    <div>
        <i class="el-icon-message-solid"></i>
        <div class="content">
            <p>{{total}}</p>
            <p>设备告警总数</p>
        </div>
    </div>
    <div id="myChart" style="width: 49%;height: 200px" v-loading='loading'></div>
  </div>
</template>

<script>
import { getData } from "@/utils/http";
export default {
    props:['total'],
    data() {
        return {
            echartsData: [] ,
            loading: false
        }
    },
    mounted() {
        this.getEchartsData();
    },
    methods: {
        // 获取echarts数据
        getEchartsData(){
            this.loading = true;
            getData('/equi/getAllWarNum').then(res=>{
                this.echartsData = [];
                res.data.warArea.forEach(item=>{
                    this.echartsData.push({value: item.warNum, name: item.warArea});
                });
                this.drawLine();
                this.loading = false;
            })
        }, 
        drawLine(){
            var chartDom = document.getElementById('myChart');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '各应用系统告警分布',
                    left: 'center',
                    textStyle: {
                        fontSize: 14,
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                    }
                },
                color: ['#007AE4', '#00B3E4'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'center',
                    icon: 'circle'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: this.echartsData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    },
}
</script>

<style scoped>
    .wrap{
        display: flex;
        width: 100%;
        height: 200px;
        margin-top: 10px;
    }
    .wrap div{
        width: 49%;
        background-color: #fff;
    }
    .wrap div:nth-child(1){
        margin-right: 2%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-icon-message-solid{
        display: block;
        padding: 10px;
        font-size: 30px;
        color: #fff;
        border-radius: 50%;
        background-color: #FE483E;
        border: 8px solid #FEE4DF;
    }
    .wrap .content{
        width: auto;
        margin-left: 10px;
    }
    .wrap .content p{
        text-align: center;
    }
    .wrap .content p:nth-child(1){
        color: #00A64A;
        font-size: 40px;
    }
</style>